<template>
	<view class="goods-detail-container">
		<!-- 商品图片 -->
		<view class="u-flex u-row-center u-p-t-40 u-p-b-20">
			<u-image width="320rpx" height="300rpx" :src="goodsData.cover_url">
				<u-loading slot="loading" mode="circle"></u-loading>
			</u-image>
		</view>
		<!-- 商品信息 -->
		<u-cell-group :border="false">
			<u-cell-item :title="goodsData.title" :title-style="{color:'#000',fontSize: '36rpx', fontWeight: 800}"
				:arrow="false" :border-bottom="false"></u-cell-item>
			<u-cell-item :title="'¥ '+goodsData.price" :title-style="{color:'#fa3534',fontSize: '30rpx', fontWeight: 800}" :value="'销量 '+goodsData.sales"
				:arrow="false" :border-bottom="false"></u-cell-item>
		</u-cell-group>
		<!-- 选项卡 -->
		<u-tabs :list="list" :is-scroll="false" :current="current" @change="change"></u-tabs>
		<!-- 富文本商品详情 -->
		<view v-show="current == 0">
			<u-parse :html="goodsData.details"></u-parse>
		</view>
		<!-- 商品评论 -->
		<view v-show="current == 1">
			<comment></comment>
		</view>
		<!-- 推荐商品 -->
		<view v-show="current == 2">		
			<!-- uView 12栅格布局 -->
			<u-row gutter="16" class="goods-list u-p-t-10">
				<!-- u-p-b-20 u-p-l-10 u-p-r-10z -->
				<u-col span="6" v-for="(item,index) in likeGoodsData" class="u-p-b-10" :key="index">		
					<!-- 商品组件 -->
					<goods :item="item"></goods>
				</u-col>
			</u-row>	
		</view>
		
		<!-- 底部导航 -->
		<view class="navigation">
			<view class="left">
			
				<view class="item" @click="collect"  >
					<u-icon name="star" :size="45" :color="goodsData.is_collect? '#fa3534':$u.color['contentColor']"></u-icon>
					<view class="text u-line-1" :class="{'is-collect': goodsData.is_collect}">收藏</view>
				</view>
				<view class="item car" @click="toCart">
					<u-badge class="car-num" :count="cartCount" type="error" :offset="[-3, -6]"></u-badge>
					<u-icon name="shopping-cart" :size="45"></u-icon>
					<view class="text u-line-1" >购物车</view>
				</view>
			</view>
			<view class="right">
				<view class="cart btn u-line-1" @click="addCart">加入购物车</view>
				<view class="buy btn u-line-1">立即购买</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
					name: '商品详情'
				}, {
					name: '商品评论',
					count: '0'
				}, {
					name: '推荐商品'
				}],
				current: 0,
				goodsData: {
					price: '',
					sales: '',
					is_collect: 0
				}, // 当前商品信息
				likeGoodsData: [], // 推荐商品
				cartCount: 0, // 购物车产品数量
			};
		},
		async onLoad(option) {
			// 读取产品详情
			let res = await this.$u.api.getGoodsDetail(option.id)
			this.goodsData = res.goods
			this.likeGoodsData = res.like_goods
			this.list[1].count = this.goodsData.comments.length
			// cart count
			if(this.vuex_token) await this.getCartCount()
			
		},
		methods:{
			change(index){
				this.current = index;
			},
			async collect() {
				await this.$u.api.collect(this.goodsData.id)
				let msg = this.goodsData.is_collect ? '取消收藏':'收藏成功'
				this.$u.toast(msg)
				this.goodsData.is_collect = !this.goodsData.is_collect
			},
			async getCartCount(){
				// 购物车数量
				let cartData = await this.$u.api.carts()
				this.cartCount = cartData.data.length
			},
			async addCart(id) {
				await this.$u.api.addCarts({
					goods_id: this.goodsData.id
				})
				await this.getCartCount()
				
				this.$u.toast('添加成功')
			},
			toCart(){
				
				this.$u.route({
					type: 'reLaunch',
					url: 'pages/cart/index'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.goods-detail-container{
		padding-bottom: 120rpx;
		.goods-list{
			background-color: $u-bg-color;
		}
		.is-collect{
			color: $u-type-error;
		}
	}
	.navigation {
		position: fixed;
		left: 0;
		bottom: 0;
		display: flex;
		justify-content: center;
		width: 100%;
		margin-top: 100rpx;
		border: solid 2rpx #f2f2f2;
		background-color: #ffffff;
		padding: 16rpx 0;
	
	.left {
			display: flex;
			font-size: 20rpx;

			.item {
				margin: 0 30rpx;

				&.car {
					text-align: center;
					position: relative;

					.car-num {
						position: absolute;
						top: -10rpx;
						right: -10rpx;
					}
				}
			}
		}
	
	.right {
			display: flex;
			font-size: 28rpx;
			align-items: center;

			.btn {
				line-height: 66rpx;
				padding: 0 30rpx;
				border-radius: 36rpx;
				color: #ffffff;
			}

			.cart {
				background-color: #ed3f14;
				margin-right: 30rpx;
			}

			.buy {
				background-color: #ff7900;
			}

			.u-image {
				margin: 0 auto;
			}
		}
	}
</style>
